import {connect} from "dva";
import BaseComponent from "components/Base/BaseComponent";
import "./index.less";

import {Axis, Chart, Geom, Tooltip} from "bizcharts";
import SearchBar from "components/Base/SearchBar/SearchBar";
import SearchColumns from "./searchColumns";
import React from "react";
import PropTypes from "prop-types";


@connect(({datachart, hospital, channel}) => ({datachart, hospital, channel}))
export default class extends BaseComponent {

  static propTypes = {
    deviceId: PropTypes.string,
    hospitalId: PropTypes.number,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  getNamespace() {
    return "datachart";
  }

  getSearchColumns = () =>{
    const searchColumns = SearchColumns(this);
    let columns = [];
    searchColumns.forEach((v) => {
      if (!(!!this.props.hospitalId && v.name == 'hospitalId'))
        columns.push(v);
    });

    return columns;
  }


  /**
   * 异步获取需要的数据
   * @returns {{dict: *, loading: *}}
   */
  getChannel = () => {
    const {all, loadingAll} = this.getModel('channel');

    const dict = (!!all && all.length > 0) ? all.map(v => {
      return ({code: v.channel, codeName: v.name})
    }) : undefined;

    return ({loading: loadingAll, dict});
  }

  render() {


    const {deviceId, hospitalId, datachart} = this.props;
    const {chartData} = datachart;

    const cols = {
      value: {
        alias: '检验数据',
        min: 0
      },
      time: {
        alias: '日期',
        range: [0, 1],
        tickCount: 10,
        type: 'timeCat',
        mask: 'YYYY-MM-DD HH:mm:ss',
      }
    };

    const title = {
      textStyle: {
        fontSize: '12',
        textAlign: 'center',
        fill: '#444',
        fontWeight: 'bold',
      }, // 坐标轴文本属性配置
    }

    return (
      <div className="chart">

        <div className="search">
          <SearchBar
            columns={this.getSearchColumns()}
            onSearch={(values, isReset) => {

              let filters = values;
              if (!!hospitalId)
                filters = {...filters, hospitalId};


              this.dispatch({
                type: `${this.getNamespace()}/getData`,
                payload: {
                  notice: this.showMsg,
                  filters: {...filters, deviceId},
                },
              })
            }}
          />
        </div>

        <Chart height={300} data={chartData} scale={cols} forceFit>
          <Axis name="time" title={title}/>
          <Axis name="value" title={title}/>
          <Tooltip
            crosshairs={{
              type: "y"
            }}
          />
          <Geom type="line" position="time*value" size={2}/>
          <Geom
            type="point"
            position="time*value"
            size={4}
            shape={"circle"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
        </Chart>
      </div>
    );
  }
}
